@use '../../variables' as *;

// --- AxiomDataTable 统一样式 ---
// 目标：确保 el-table 在所有 AxiomView 主题下表现一致，并遵循框架的样式变量规范。

.axiom-data-table-wrapper {
  // 容器样式
  border: 1px solid var(--axiom-border-color);
  border-radius: var(--axiom-border-radius-base);
  overflow: hidden;
  background-color: var(--axiom-bg-color-base);

  .el-table {
    // 覆盖 Element Plus 的核心 CSS 变量，以注入我们的主题系统。
    // 这是控制表格样式的首选方法，避免使用 !important。
    --el-table-border-color: var(--axiom-border-color);
    --el-table-header-bg-color: var(--axiom-bg-color-lighter);
    --el-table-header-text-color: var(--axiom-text-color-secondary);
    --el-table-tr-bg-color: var(--axiom-bg-color-base);
    --el-table-bg-color: var(--axiom-bg-color-base);
    --el-table-text-color: var(--axiom-text-color-primary); // 解决暗色主题下文本看不清的问题
    
    // --- 状态颜色 ---
    --el-table-row-hover-bg-color: var(--axiom-bg-color-hover); // 修正悬浮颜色，与 TreeTable 对齐
    --el-table-current-row-bg-color: transparent; // 移除突兀的选中行背景色

    // 移除 Element Plus 默认的内外边框线
    &::before,
    &::after {
      display: none;
    }

    // 表头样式
    .el-table__header-wrapper th {
      // 确保表头颜色和文字颜色来自主题变量
      background-color: var(--el-table-header-bg-color);
      color: var(--el-table-header-text-color);
    }
    
    // 表格行样式
    .el-table__row {
      // 确保行背景色和文字颜色来自主题变量
      background-color: var(--el-table-tr-bg-color);
      color: var(--el-table-text-color);
      
      // 当前选中行的样式 (此部分不再需要，已通过 --el-table-current-row-bg-color 控制)
      /*
      &.current-row > td,
      &.current-row > td.el-table__cell {
        background-color: var(--axiom-primary-color-light);
      }
      */
    }
    
    // 单元格样式
    .el-table__cell {
      border-color: var(--axiom-border-color);
      background-color: transparent; // 单元格背景应透明，以显示行的背景色
    }

    // 单元格内容自动对齐和间距
    .cell {
      display: flex;
      align-items: center;
      
      // 为操作列中的按钮自动添加间距
      .axiom-button + .axiom-button {
        margin-left: var(--axiom-spacing-md); // 修正：与树表统一为 md 间距
      }
    }

    // 空数据状态
    .el-table__empty-block {
      background-color: transparent;
    }
  }
}

// --- 暗色主题兼容 ---
// 在暗色主题下，为斑马纹行提供更合适的背景色，与 TreeTable 行为一致
[data-scheme='dark'] .axiom-data-table-wrapper .el-table .el-table__row--striped td.el-table__cell {
  background-color: var(--axiom-bg-color-secondary, #1a1a1a) !important;
}

// --- AxiomDataTable 分页器统一样式 ---
.axiom-data-table-pagination {
  margin-top: var(--axiom-data-table-pagination-margin-top, 1.5rem);
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem;
  // 移除容器的背景色和边框，使其更自然
  // background-color: var(--axiom-bg-color-base);
  // border-radius: var(--axiom-border-radius-base);
  // border: 1px solid var(--axiom-border-color);

  .el-pagination {
    // 覆盖 Element Plus 分页器的核心 CSS 变量
    --el-pagination-bg-color: transparent;
    --el-pagination-text-color: var(--axiom-text-color);
    --el-pagination-button-color: var(--axiom-text-color);
    --el-pagination-button-disabled-bg-color: transparent;
    --el-pagination-button-disabled-color: var(--axiom-text-color-disabled);
    --el-pagination-hover-color: var(--axiom-primary-color);
    
    // 修正：确保总数和跳转文本颜色正确
    .el-pagination__total,
    .el-pagination__jump {
      color: var(--axiom-text-color-secondary);
    }

    // 确保分页器中的输入框样式也与主题匹配
    // 参考 _axiom-input.scss 的标准实现
    .el-select .el-input__wrapper, 
    .el-input:not(.is-disabled) .el-input__wrapper {
      background-color: var(--bg-color-secondary) !important;
      border: 1px solid var(--border-color) !important;
      border-radius: var(--border-radius-base) !important;
      box-shadow: none !important;
      transition: all 0.3s ease !important;
      
      &:hover {
        border-color: var(--primary-color) !important;
      }
      
      &.is-focus {
        border-color: var(--primary-color) !important;
        box-shadow: var(--axiom-input-focus-shadow, 0 0 0 2px var(--primary-color-light)) !important;
      }
    }

    .el-input__inner {
      color: var(--text-color) !important;
      font-family: var(--font-family-base) !important;
      
      &::placeholder {
        color: var(--text-color-secondary) !important;
      }
    }
  }
}

// --- Theme Overrides for Pagination Inputs/Selects ---
// 为分页器中的原生 el-input 和 el-select 组件复制主题样式
html.theme-cyberpunk .axiom-data-table-pagination,
html.theme-neon .axiom-data-table-pagination,
html.theme-rainbow-cyber .axiom-data-table-pagination {
  
  .el-input__wrapper,
  .el-select__wrapper {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: var(--backdrop-blur) !important;

    &:hover {
      border-color: var(--primary-color) !important;
    }

    // 修正: 使用 :focus-within 确保在任何聚焦场景下都能触发
    &:focus-within {
      border-color: var(--primary-color-hover) !important;
      box-shadow: var(--primary-glow) !important;
    }
  }
} 